<template>
	<view class="list">
		<view class="item" v-for="item in goodsList" @click="toViewInfo(item)">
			<view class="top">
				<view class="img">
					<image :src="item.goodsImgListSmall"></image>
				</view>
				<view class="desc">
					<text class="title">{{ item.goodsName }}</text>
					<!-- <text class="sku">{{ item.goodsSku }}</text> -->
					<text class="over-time" v-if="item.overTime">有限期限至：{{ item.overTime }}</text>
				</view>
				<!-- <image class="state" v-if="item.state === 1" src="@/static/new/user/cancelled.png"></image>
				<image class="state" v-if="item.state === 2" src="@/static/new/user/expired.png"></image> -->
			</view>
			<view v-if="item.state === 0" class="line"></view>
			<view v-if="item.state === 0" class="bottom">
				<text>去兑换</text>
			</view>
		</view>
	</view>
	<gzListNull :list="goodsList"></gzListNull>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { defineProps } from 'vue'
	
	const props = defineProps({
		goodsList: {
			type: Array,
			default: []
		},
		detailType:{
			type:String,
			
		}
	})
	const toViewInfo = (item) => {
		console.log(item,'item')
		uni.navigateTo({
			url:`/pages/pageEquityCenter/directCardDetail?detailData=${encodeURIComponent(JSON.stringify(item))}&detailType=${props.detailType}`
		})
	}
</script>

<style lang="less">
	.list{
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		.item{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 36rpx 28rpx 36rpx;
			box-sizing: border-box;
			
			.top{
				display: flex;
				gap: 20rpx;
				position: relative;
				.img{
					width: 160rpx;
					height: 160rpx;
					background: #EBEFF9;
					border-radius: 16rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				.desc{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					
					.title{
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
					.sku{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
					.over-time{
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
					}
				}
				
				.state{
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					bottom: -22rpx;
					right: 0;
				}
			}
			
			.line{
				margin: 36rpx 0 0;
				background-color: #eee;
				height: 1rpx;
			}
			.bottom{
				padding-top: 18rpx;
				text-align: right;
				text{
					display: inline-block;
					padding: 16rpx 32rpx;
					background-color: #24C789;
					font-size: 24rpx;
					border-radius: 34rpx;
					color: #fff;
				}
			}
		}
	}
</style>